<template>
  <div class="login-container">
    <van-nav-bar
      class="app-nav-bar"
      title="注册|登录"
      left-arrow
      @click-left="$router.back()"
    />
    <!--登录表单-->
    <!--
       基于Vant的表单验证
       1、使用Vant-form组件包裹所有的表单项 van-field
       2、给van-form绑定submit事件
       当表单提交的时候会触发submit事件
       提示：只有表单验证通过，才会调用submit
    -->
    <van-form @submit="onLogin" ref="login-form" :show-error="false" :show-error-message="false" @failed="onFailed" :validate-first="true">
      <van-field
        v-model="user.mobile"
        icon-prefix="toutiao"
        left-icon="shouji"
        placeholder="请输入手机号码"
        name="mobile"
        :rules="formRules.mobile"
      />
      <van-field
        v-model="user.code"
        clearable
        icon-prefix="toutiao"
        left-icon="yanzhengma"
        placeholder="请输入验证码"
        name="code"
      >
      <template #button>
          <van-count-down :time="1000*60" format="ss s" v-if="isCountDownShow"  @finish="isCountDownShow = false" center/>
          <van-button class="send-btn" size="small" round @click.prevent="onSendSms" v-else :loading="isSendSmsLoading" center>发送验证码</van-button>
      </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" block>登录</van-button>
      </div>
    </van-form>
    <!--/登录表单-->
  </div>
</template>

<script>
  import { login,sendSms } from '@/api/user'
  import { Toast } from 'vant'

  export default {
     name: 'LoginIndex',
     data () {
       return {
         user:{
           mobile:'17090086870',//手机号
           code:'246810' ,//验证码
         },
         formRules:{
           mobile:[
             {required: true, message:'请填写手机号码'},
             {pattern: /^1[3|5|7|8|9]\d{9}$/, message:'手机号码格式错误'}
           ],
           code:[
             {required: true, message:'请输入验证码'},
             {pattern:/^\d{6}$/, message:'验证码格式错误'}
           ]
         },
         isCountDownShow:false ,//是否显示倒计时
         isSendSmsLoading:false,//发送验证码按钮的loading状态
       }
     },
     methods:{
       async onLogin () {
         Toast.loading({
           message: '登录中',
           forbidClick: true,
           duration:0,
         });
         //1.找到数据接口
         //2.封装请求方法
         //3.请求调用登录
         try{
           const res = await login(this.user)
           //处理响应结果
           Toast.success('登录成功')

           //将后端返回的用户登录状态（token等数据）放到Vuex等容器中
           this.$store.commit('setUser',res.data.data)
           
           //清除layout的缓存，让他重新渲染
           this.$store.commit('removeCachePage','LayoutIndex')
           
           //登录成功后，跳转回原来页面
           // this.$router.back()
           this.$router.push(this.$route.query.redirect || '/')
         } catch (err) {
          Toast.fail('登录失败,手机号码或验证码错误')
         }
       },
       onFailed (error) {
         if(error.errors[0]){
           Toast({
             message:error.errors[0].message, //提示信息
             position:'top' //顶部提示，防止用户键盘挡住
           })
         }
       },
       async onSendSms () {
         //tryl里面任何代码错误都会进入catch
         try{
           //检查手机号码
           await this.$refs['login-form'].validate('mobile')

           //用户通过，请求发送验证码
           this.isSendSmsLoading = true //展示按钮的loading状态，防止网络慢用户多次点击发送按钮
           const res = await sendSms(this.user.mobile)

           //短信发送成功，显示倒计时
           this.isCountDownShow = true
         } catch (err) {
           let message = ''
           //发送短信验证码的错误提示
           if(err && err.respose && err.response.status == 429){
             message = '请求太频繁了，请稍后再试'
           }else if(err.name === 'mobile'){
             //验证失败的错误提示
             message = err.message
           }else{
             message = '发送失败，请稍后重试'
           }

           //提示用户
           Toast({
             message,
             position:'top'
           })
         }

         //不管发送验证码成功还是发送失败，都关闭发送按钮的loading状态
         this.isSendSmsLoading = false
       }
     }
  }
</script>

<style scoped lang="less">
  .send-btn{
    width:78px;
    height:23px;
    background-color: #ededed;
    .van-button__text{
      font-size:11px;
      color:#666666;
    }
  }
  .login-container{
    .login-btn-wrap{
      padding:26px 16px;
      .login-btn{
        background-color: #6db4fb;
        border:none;
        .van-button__text{
          font-size:15px;
        }
      }
    }
  }
</style>
